<template>
	<view class="person-container">
		<navBar :title='title'></navBar>
		<view class="job-title">
			<view class="title">添加求职期望</view>
			<view class="sub-title">求职期望不同,推荐的职位也会不同</view>
		</view>
		<view class="person-info">
			<view class="info-main">
				<view class="main-item"
				 v-for="(item, index) in form.formLabel"
				 :key="index">
					<view class="item-label">{{ item.label }}</view>
					<view class="item-type">
						<picker style="width: 100%;height: 40rpx;" v-if="item.type === 'picker'" :value="item.selectIndex" mode="selector" range-key="name" :range="item.range" @change="bindPickerChange">
							<view>{{  item.range && item.range[item.selectIndex] ? item.range[item.selectIndex].name : '请选择'}}</view>
						</picker>	
						<picker style="width: 100%;height: 40rpx;" v-if="item.type === 'pickers'" :value="item.selectIndex"  mode="selector" range-key="name" :range="item.range" @change="bindPickerChanget">
							<view>{{item.range && item.range[item.selectIndex] ? item.range[item.selectIndex].name : '请选择'}}</view>
						</picker>
						<view @click="openGw" style="width: 100%;height: 40rpx;" v-if="item.type === 'pickerzw'">{{ form.formData.positionName ? form.formData.positionName : '请选择' }}</view>
						<view @click="openTime" class="type-time" v-if="item.type === 'time'">{{ form.time ? form.time : '请选择' }}</view>
						<view v-if="item.type === 'select'" class="type-addess" @click="openAdd">{{ form.address ? form.address : '请选择' }}</view>		
						<uni-easyinput v-model="form.formData[item.prop]" :type='item.types' :clearable="false" v-if="item.type === 'input'" :placeholder=" '请输入' + item.label"></uni-easyinput>
						<image src="@/static/img/common/arrr.png" mode=""></image>
					</view>
				</view>
				<template v-if="isShow">
					<view class="main-item" v-for="(item, index) in form.formLabelOne"
					 :key="index">
						<view class="item-label">{{ item.label }}</view>
						<view class="item-type">
							<picker style="width: 100%;height: 40rpx;" v-if="item.type === 'pickerfs'" :value="item.selectIndex" mode="selector" range-key="name" :range="item.range" @change="bindPickerFs">
								<view>{{  item.range && item.range[item.selectIndex] ? item.range[item.selectIndex].name : '请选择'}}</view>
							</picker>	
							<uni-easyinput v-model="form.formData[item.prop]" :type='item.types' :clearable="false" v-if="item.type === 'input'" :placeholder=" '请输入' + item.label"></uni-easyinput>
							<image src="@/static/img/common/arrr.png" mode=""></image>
						</view>
					</view>
				</template>
	
				<!-- 薪资范围 -->
				<view class="main-item">
					<view class="item-label">薪资范围</view>
					<view class="item-type">
						<view class="type-ipt">
							<uni-easyinput v-model="form.formData.salaryMin" :clearable="false" type="number" placeholder="请输入"></uni-easyinput>
							<text class="mg-rt10">-</text>
							<uni-easyinput v-model="form.formData.salaryMax" :clearable="false" type="number" placeholder="请输入"></uni-easyinput>
							<text>元</text>
						 </view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<button class="btns" @click="save">保存</button>
		</view>
		<timeSlot
			    ref="timeslot"
			    :title="'选择时间段'"
			    @confirm="confirmTime"/>
		<!-- 区域选择 -->
		<areaSelect ref='areaChoose' @confirm='areaConfirm'></areaSelect>
		<!-- 职位选择 -->
		<uni-popup ref="zwRef">
			<view class="zw-content">
			 <scroll-view scroll-y="true" style="flex: 2; height: 100%;border-right: 1rpx solid #ddd;">
			 	<view class="zw-left"
				 v-for="(item, index) in zwData.communityListArray"
				 :key="index"
				 @click="jump(item)">{{ item.name }}</view>
			 </scroll-view> 
			 <scroll-view scroll-y="true" style="flex: 3.5; height: 100%;border-right: 1rpx solid #ddd;" >
			 	<view class="zw-right"
				v-for="(item, index) in zwData.selectData"
				:key="index"
				@click="jumpZw(item)">
					{{ item.name }}
				</view>
			 </scroll-view>
			 <scroll-view scroll-y="true" style="flex: 3.5; height: 100%;" >
			 	<view class="zw-right"
				v-for="(item, index) in zwData.selectDataTwo"
				:key="index"
				@click="jumpZws(item)">
					{{ item.name }}
				</view>
			 </scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'	
import { onLoad } from '@dcloudio/uni-app'
import navBar from '@/components/navBar.vue';
import areaSelect from '@/components/area-choose/area-choose.vue'
import timeSlot from "@/components/wanghexu-timeslot/wanghexu-timeslot.vue"
import api from '@/utils/api/recruit.js'
import { showToast } from '@/utils/toast';
const title = ref('求职期望')
const areaChoose = ref(null)
onLoad(res=> {
	if(res.data){
		let obj = JSON.parse(res.data)
		if(obj.length){
			form.address = `${obj[0].workProvinceName}-${obj[0].workCityName}-${obj[0].workDistrictName}`
			form.time = obj[0].workTime
			let sexIndex = form.formLabel[0].range.findIndex(item=>item.value == obj[0].expectWorkType)
			form.formLabel[0].selectIndex = sexIndex
			let xlIndex = form.formLabel[1].range.findIndex(item=>item.value == obj[0].positionType)
			form.formLabel[1].selectIndex = xlIndex
			form.formData = obj[0]
		}
	}
})
onMounted(_ => {
	getList()
})
const zwData = reactive({
	  communityListArray : [],
		selectData: [],
		selectDataTwo: [],
	// 默认选择的索引
	  multiIndex : ''
})
const form = reactive({
	formLabel: [
		// { label: '头像', prop: '', type: 'upload' },
		{ label: '求职类型', prop: 'expectWorkType', type: 'picker', range:[{name: '全职', value: 'FULL_TIME'}, {name: '兼职', value: 'PART_TIME_JOB'}], selectIndex: '' },
		{ label: '工作类型', prop: 'positionType', type: 'pickers', range:[{name: '线下', value: 'OFFLINE'}, {name: '线上', value: 'ONLINE'}], selectIndex: ''  },
		{ label: '工作城市', prop: 'address', type: 'select' },
		{ label: '期待职位', prop: 'positionName', type: 'pickerzw' },
		{ label: '工作时间', prop: '', type: 'time' },
	],
	formLabelOne: [
		{ label: '结算方式', prop: 'salarySettleType', type: 'pickerfs',selectIndex: '' ,range: [{name: '单结', value: 'SINGLE_SETTLEMENT'}, {name: '日结', value: 'DAILY_SETTLEMENT'}, {name: '月结', value: 'MONTHLY_SETTLEMENT'}] },
		{ label: '工作量', prop: 'workDays', type: 'input',  },
	],
	formData:{},
	address: '',
	time: ''
})
const zwRef = ref(null)
const isShow = ref(false)
// 选择求职类型
const bindPickerChange = e => {
	let index = e.detail.value
	isShow.value = index === 1 ? true : false
	form.formLabel[0].selectIndex = index
	form.formData.expectWorkType = form.formLabel[0].range[index].value
}
// 选择时间
const confirmTime = e => {
	form.formData.workTime = `${e.start.hour}:${e.start.min} - ${e.end.hour}:${e.end.min}`
	form.time = `${e.start.hour}:${e.start.min}-${e.end.hour}:${e.end.min}`
}
// 选择工作类型
const bindPickerChanget = e => {
	let index = e.detail.value
	form.formLabel[1].selectIndex = index
	form.formData.positionType = form.formLabel[1].range[index].value
}
// 选择结算方式
const bindPickerFs = e => {
	let index = e.detail.value
	form.formLabelOne[0].selectIndex = index
	form.formData.salarySettleType = form.formLabelOne[0].range[index].value
}
// 城市选择
const areaConfirm = val => {
	console.log(val, '====');
	form.address = val.addressList.length > 2 ? `${val.addressList[0]}-${val.addressList[1]}-${val.addressList[2]}` : `${val.addressList[0]}-${val.addressList[1]}`
	form.formData.workProvinceName = val.addressList[0]
	form.formData.workCityName = val.addressList[1]
	form.formData.workDistrictName = val.addressList.length > 2 ? val.addressList[2] : ''
	form.formData.workCity = val.cityCode
	form.formData.workDistrict = val.disCode
	form.formData.workProvince = val.proCode
}
const timeslot = ref(null)
// 打开城市选择
const openAdd = _ => areaChoose.value.show()
const openTime = _ => timeslot.value.open()
// 保存
const save = async _ => {
	if(!form.formData.expectWorkType){
		return showToast('请选择求职类型')
	}
	if(!form.formData.positionType){
		return showToast('请选择工作类型')
	}
	if(!form.formData.workProvinceName){
		return showToast('请选择工作城市')
	}
	if(!form.formData.positionName){
		return showToast('请输入期待职位')
	}
	if(!form.formData.workTime){
		return showToast('请选择工作时间')
	}
	let data = {
		saveType: 'JOB_EXPECTATIONS',
		appUserDesire: [form.formData]
	}
	const res = await api.saveUserResume(data)
	if(res.code === 200) {
		showToast(res.msg)
		uni.$emit('refsh')
		uni.navigateBack()
	}
}
// 点击每一项
const jump =  async (item) => {
	const res = await api.viewPosition(item.id);
	zwData.selectData = res.data;
}
// 获取职位列表
const getList = async _ => {
	const res = await api.viewPosition(0);
	zwData.communityListArray = res.data;
}
// 打开职位选择
const openGw = _ => zwRef.value.open('bottom')
const jumpZw = async (item) => {
	const res = await api.viewPosition(item.id);
	zwData.selectDataTwo = res.data;
}
const jumpZws = async (item) => {
	zwRef.value.close()
	const res = await api.viewPosition(item.id);
	form.formData.positionName = item.name;
	form.formData.positionId = item.id
}
</script>

<style lang="scss" scoped>
.zw-content{
	padding: 20rpx;
	box-sizing: border-box;
	background: #fff;
	display: flex;
	height: 90vh;
	// align-items: center;
	.zw-left{
		padding: 10rpx;
		&:hover{
			background: #ddd;
		}
	}
	.zw-right{
		padding: 10rpx;
		&:hover{
			background: #ddd;
		}
	}
	// height: 0rpx;
}	
::v-deep .is-input-border{
	border: none !important;
}	
::v-deep .uni-easyinput__content-input{
	padding-left: 0 !important;
}
.person-container{
	height: 100vh;
	background: #fff;
	overflow: auto;

	.job-title{
		margin-top: 32rpx;
		padding-left: 52rpx;
		box-sizing: border-box;
		.title{
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: normal;
			font-size: 48rpx;
			color: #333333;
			line-height: 72rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
		.sub-title{
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: normal;
			font-size: 28rpx;
			color: #333333;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
	}
	.person-info{
		padding: 32rpx;
		box-sizing: border-box;
			padding-bottom: 180rpx;
		.info-main{
			width: 100%;
			.main-item{
				display: flex;
				// align-items: center;
				flex-direction: column;
				// justify-content: space-between;
					.item-label{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 32rpx;
						color: #262626;
						line-height: 48rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin: 16rpx 0;

				}

				.item-type{
					display: flex;
					align-items: center;
					height: 70rpx;
					padding: 32rpx 0;
					box-sizing: border-box;
					border-bottom: 1rpx solid #E5E5E5;
					.type-ipt{
						display: flex;
						align-items: center;
					}
					.type-addess{
						flex: 1;
						height: 50rpx;
					}	
					.type-time{
						flex: 1;
						height: 50rpx;
					}
					image{
						width: 38rpx;
						height: 38rpx;
					}
				}
			}
			// .main-item:not(:first-child){
			// 	padding: 32rpx 0;
			// 	box-sizing: border-box;
			// 	border-bottom: 1rpx solid #E5E5E5;
			// 	.item-type{
			// 		height: 70rpx;
			// 	}
			// }
		}
	}
	.btn{
		position: fixed;
		bottom: 0;
		left: 0;
		height: 180rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background: #fff;
		width: 100%;
		display: flex;
		.btns{
			width: 640rpx;
			height: 88rpx;
			background: #6B64D3;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			color: #fff;
		}
	}
}
</style>
